<template>
	<view class="coupon_card">
		<view class="u-flex u-flex-column u-flex-items-center">
			<view class="f-s-30 f-w-b">30</view>
			<view class="f-s-12 f-w-b">满200可用</view>
		</view>
		<view>
			<view class="f-s-14 f-w-b">新人优惠券</view>
			<view class="u-flex u-flex-1 u-flex-between">
				<view class="f-s-12 u-m-t-12 u-m-r-12">有效期：2024-05-01</view>
				<view>
					<u-button color="#35c967" shape="circle" text="去使用"
						:customStyle="{width: '80px',height:'30px'}"></u-button>
				</view>
			</view>
			<view class="u-info f-s-12 u-flex">
				<view @click="show = true">使用规则</view>
			</view>
		</view>
	</view>
	<up-popup :show="show" @close="close" @open="open" mode="bottom" round="20" bgColor="#efefef">
		<view class="popup_card">
			<view class="coupon_card_">
				<view class="f-s-30 f-w-b">30</view>
				<view class="u-m-l-40">
					<view class="f-w-b">新人优惠券</view>
					<view class="f-s-12">有效期：2024-05-01</view>
				</view>
			</view>
			<view class="u-m-t-24">
				<view class="f-s-14 f-w-b">使用规则</view>
				<view class="u-info f-s-12 u-m-t-20">
					<view>1.使用规则使用规则使用规则使用规则使用规则使用规则</view>
					<view class="u-m-t-20">2.使用规则使用规则使用规则使用规则使用规则使用规则</view>
				</view>
			</view>
		</view>
	</up-popup>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	// 创建响应式数据  
	const show = ref(false);
	// 定义方法  
	function open() {
		// 打开逻辑，比如设置 show 为 true  
		show.value = true;
		// console.log('open');  
	}

	function close() {
		// 关闭逻辑，设置 show 为 false  
		show.value = false;
		// console.log('close');  
	}
</script>

<style lang="scss">
	.coupon_card {
		padding: 16px;
		background-color: #fff;
		border-radius: 8px;
		margin-bottom: 12px;
		display: flex;
		justify-content: space-around;
	}

	.popup_card {
		height: 400px;
		margin: 24px 16px;

		.coupon_card_ {
			padding: 24px;
			border-radius: 8px;
			background-color: #ffffff;
			display: flex;
			align-items: center;
		}
	}
</style>